<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul,
      li {
        list-style: none;
        height: 30px;
        width: 100%;
      }
      .wrap {
        width: 300px;
        height: 80px;
        margin: 20px auto;
        display: flex;
        flex-direction: column;
      }
      .wrap #ipt {
        width: 100%;
        height: 50px;
        font-size: 20px;
        box-sizing: border-box;
        outline: none;
      }
      .wrap li {
        display: flex;
        justify-content: end;
      }
      .wrap li > .show {
        box-sizing: border-box;
        /* flex: 1; */
        width: 200px;
        padding-left: 20px;
        background-color: #ccc;
        border: 1px solid #000;
      }
      .wrap li > button {
        width: 50px;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <input type="text" id="ipt" />
      <ul>
        <!-- <li><span></span><button>修改</button><button>删除</button></li> -->
      </ul>
    </div>
  </body>
  <script>
    function loadList() {
      let ipt = document.querySelector("input");
      let xhr = new XMLHttpRequest();
      let url = `http://localhost:3000/todos`;
      let HTML = "";
      xhr.open("GET", url);
      xhr.send();
      xhr.onload = () => {
        if (xhr.status == 200) {
          let arr = JSON.parse(xhr.responseText);
          console.log(arr);
          arr
            .reverse((v) => v)
            .forEach((v, index) => {
              HTML += `
            <li><input type="text" class="show" onchange="dian()" value="${
              index + 1
            }：${v.title}" /><button onclick="Update(${
                v.id
              },${index})">修改</button><button onclick="Delete(${
                v.id
              })">删除</button></li>
            `;
            });
          document.querySelector(".wrap ul").innerHTML = HTML;
          console.log("获取成功");
        }
      };
    }

    function createFn(value) {
      let xhr = new XMLHttpRequest();
      let url = `http://localhost:3000/todos`;
      xhr.open("POST", url);
      xhr.setRequestHeader("content-type", "application/json");
      xhr.send(JSON.stringify({ title: value, completed: 0 }));
      console.log(JSON.stringify({ title: value, completed: 0 }));
      xhr.onload = () => {
        if (xhr.status == 201) {
          console.log("创建成功");
          loadList();
        }
      };
      document.querySelector("#ipt").value = null;
    }

    function UpdateData(ID, obj) {
      console.log("点击修改");
      let xhr = new XMLHttpRequest();
      let url = `http://localhost:3000/todos/${ID}`;
      // 对比obj.value与title是否相同，不相同则更新数据
      xhr.open("PATCH", url);
      xhr.setRequestHeader("content-type", "application/json");
      xhr.send(JSON.stringify({ title: obj.value }));
      xhr.onload = () => {
        // console.log(xhr.status);
        if (xhr.status == 200) {
          console.log("修改成功");
          loadList();
        }
      };
    }

    function Update(ID, index) {
      // console.log(ID, index);
      // 拿到索引和ID，取input中的value发送到patch请求，更改
      // 如果，没有点击修改按钮，内容不改变
      let show = document.querySelectorAll(".show");
      // console.log(show);
      if (flag) {
        UpdateData(ID, show[index]);
        flag = !flag;
      } else {
        console.log("标题没变，不做修改");
      }
    }

    function Delete(ID) {
      console.log("点击删除");
      let xhr = new XMLHttpRequest();
      let url = `http://localhost:3000/todos/${ID}`;
      xhr.open("DELETE", url);
      xhr.setRequestHeader("content-type", "application/json");
      xhr.send();
      xhr.onload = () => {
        if (xhr.status == 200) {
          console.log("删除成功");
          loadList();
        }
      };
    }

    let Input = document.querySelector("#ipt");
    let flag = false;
    loadList();
    Input.onchange = () => {
      console.log("点击创建");
      createFn(Input.value);
    };
    function dian() {
      flag = !flag;
    }
  </script>
</html>
